// 饼图
; (function () {
  const myChart = echarts.init(document.querySelector('.pie'))
  const option = {
    tooltip: {
      formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
    },
    title: {
      text: '籍贯 Hometown',
      textStyle: {
        color: '#6d767e' // 标题演示
      },
    },
    series: [
      {
        // 图形名称
        name: '各地学员分布',
        // 类形
        type: 'pie',
        // 半径
        // 第一个数组的值是内部圆的半径
        // 第一个数组的值是外部圆的半径
        radius: ['10%', '60%'],
        // 圆的中心点位置
        center: ['50%', '50%'],
        // roseType: area | radius
        //'radius' 扇区圆心角展现数据的百分比，半径展现数据的大小。
        //'area' 所有扇区圆心角相同，仅通过半径展现数据大小。
        roseType: 'area',
        // 扇区样式

        itemStyle: {
          borderRadius: 4
        },
        // 数据
        data: [
          { value: 40, name: '北京' },
          { value: 38, name: '山东' },
          { value: 32, name: '上海' },
          { value: 30, name: '江苏' },
          { value: 28, name: '河北' },
          { value: 26, name: '山西' },
          { value: 22, name: '河南' },
          { value: 18, name: '辽宁' }
        ]
      }
    ]
  };

  myChart.setOption(option)
})()

  // 线型图
  ; (function () {
    const myChart = echarts.init(document.querySelector('.line'))
    const option = {
      // 颜色
      color: ['red', 'blue'],
      // 图例
      legend: {
        top: 20,
        data: ['期望薪资', '实际薪资']
      },
      // 鼠标移入的提示
      tooltip: {
        trigger: 'axis', // 轴触发
        position: function (pt) {
          // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
          // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
          return [pt[0], '10%'];
        }
      },
      // 标题
      title: {
        text: '薪资 Salary',
        textStyle: {
          color: '#6d767e'
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false, // x轴两边的留白策略，false表示不留空白
        data: ['张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥', '张三', '李四', '张飞', '赵云', '狗哥']
      },
      yAxis: {
        type: 'value',
        // Y轴类型为value，则留白策略指的是对数据的延伸。
        // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
        boundaryGap: [0, '50%'],
      },
      // 数据缩放组件
      dataZoom: [
        {
          type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
          start: 0,
          end: 10
        },
        {
          type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
          start: 0, // 拖动滑块起始位置（这是一个百分比）
          end: 15 // 拖动滑块结束位置（这是一个百分比）
        }
      ],
      // 数据部分
      series: [
        {
          name: '期望薪资',
          type: 'line',
          smooth: true, // 表示使用平滑曲线
          symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
          itemStyle: { // 单独控制这条线的颜色
            color: '#ee6666'
          },
          data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000]
        },
        {
          name: '实际薪资',
          type: 'line',
          smooth: true,
          symbol: 'none',
          itemStyle: { // 单独控制这条线的颜色
            color: '#5470c6'
          },
          data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000]
        }
      ]
    };

    myChart.setOption(option)
  })()

  // 柱状图部分
  ; (function () {
    const myChart = echarts.init(document.querySelector('.barChart'))
    const option = {
      // 网格（整个图表区域设置）
      grid: {
        top: 30,
        bottom: 30,
        left: '7%',
        right: '7%'
      },
      // 鼠标移入的提示
      tooltip: {
        trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
        axisPointer: {   // 坐标轴指示器配置项
          // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      // 图例
      legend: {},
      // X轴
      xAxis: [
        {
          type: 'category',
          data: ['1组', '2组', '3组', '4组', '5组', '6组', '7组'],
          axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
            type: 'shadow'
          }
        }
      ],
      // Y轴
      yAxis: [
        {
          type: 'value',
          min: 0, // y轴数据最小值
          max: 100, // y轴数据最大值
          interval: 10, // step步长，把y轴的数据分成多少份
          axisLabel: { // Y轴文字设置
            formatter: '{value}分', // Y轴文字
          }
        },
        {
          type: 'value',
          min: 0,
          max: 10,
          interval: 1,
          axisLabel: {
            formatter: '{value}人'
          }
        }
      ],
      // 数据部分（4组数据）
      series: [
        {
          name: '平均分',
          type: 'bar',
          data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
          barWidth: '15',
        },
        {
          name: '低于60分人数',
          type: 'bar',
          data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
          barWidth: '15',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
        },
        {
          name: '60到80分之间',
          type: 'bar',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          barWidth: '15',
          data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4]
        }
        ,
        {
          name: '高于80分人数',
          type: 'bar',
          yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
          barWidth: '15',
          data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4]
        }
      ]
    };
    myChart.setOption(option)
  })()
  // 地图部分
  ; (function () {
    const myChart = echarts.init(document.querySelector('.map'))
    var chinaGeoCoordMap = {
      '黑龙江': [127.9688, 45.368],
      '内蒙古': [110.3467, 41.4899],
      "吉林": [125.8154, 44.2584],
      '北京市': [116.4551, 40.2539],
      "辽宁": [123.1238, 42.1216],
      "河北": [114.4995, 38.1006],
      "天津": [117.4219, 39.4189],
      "山西": [112.3352, 37.9413],
      "陕西": [109.1162, 34.2004],
      "甘肃": [103.5901, 36.3043],
      "宁夏": [106.3586, 38.1775],
      "青海": [101.4038, 36.8207],
      "新疆": [87.9236, 43.5883],
      "西藏": [91.11, 29.97],
      "四川": [103.9526, 30.7617],
      "重庆": [108.384366, 30.439702],
      "山东": [117.1582, 36.8701],
      "河南": [113.4668, 34.6234],
      "江苏": [118.8062, 31.9208],
      "安徽": [117.29, 32.0581],
      "湖北": [114.3896, 30.6628],
      "浙江": [119.5313, 29.8773],
      "福建": [119.4543, 25.9222],
      "江西": [116.0046, 28.6633],
      "湖南": [113.0823, 28.2568],
      "贵州": [106.6992, 26.7682],
      "云南": [102.9199, 25.4663],
      "广东": [113.12244, 23.009505],
      "广西": [108.479, 23.1152],
      "海南": [110.3893, 19.8516],
      '上海': [121.4648, 31.2891]
    };
    var chinaDatas = [
      [{
        name: '黑龙江',
        value: 0
      }], [{
        name: '内蒙古',
        value: 0
      }], [{
        name: '吉林',
        value: 0
      }], [{
        name: '辽宁',
        value: 0
      }], [{
        name: '河北',
        value: 0
      }], [{
        name: '天津',
        value: 0
      }], [{
        name: '山西',
        value: 0
      }], [{
        name: '陕西',
        value: 0
      }], [{
        name: '甘肃',
        value: 0
      }], [{
        name: '宁夏',
        value: 0
      }], [{
        name: '青海',
        value: 0
      }], [{
        name: '新疆',
        value: 0
      }], [{
        name: '西藏',
        value: 0
      }], [{
        name: '四川',
        value: 0
      }], [{
        name: '重庆',
        value: 0
      }], [{
        name: '山东',
        value: 0
      }], [{
        name: '河南',
        value: 0
      }], [{
        name: '江苏',
        value: 0
      }], [{
        name: '安徽',
        value: 0
      }], [{
        name: '湖北',
        value: 0
      }], [{
        name: '浙江',
        value: 0
      }], [{
        name: '福建',
        value: 0
      }], [{
        name: '江西',
        value: 0
      }], [{
        name: '湖南',
        value: 0
      }], [{
        name: '贵州',
        value: 0
      }], [{
        name: '广西',
        value: 0
      }], [{
        name: '海南',
        value: 0
      }], [{
        name: '上海',
        value: 1
      }]
    ];

    var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = chinaGeoCoordMap[dataItem[0].name];
        var toCoord = [116.4551, 40.2539];
        if (fromCoord && toCoord) {
          res.push([{
            coord: fromCoord,
            value: dataItem[0].value
          }, {
            coord: toCoord,
          }]);
        }
      }
      return res;
    };
    var series = [];
    [['北京市', chinaDatas]].forEach(function (item, i) {
      console.log(item)
      series.push({
        type: 'lines',
        zlevel: 2,
        effect: {
          show: true,
          period: 4, //箭头指向速度，值越小速度越快
          trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          symbol: 'arrow', //箭头图标
          symbolSize: 5, //图标大小
        },
        lineStyle: {
          normal: {
            width: 1, //尾迹线条宽度
            opacity: 1, //尾迹线条透明度
            curveness: .3 //尾迹线条曲直度
          }
        },
        data: convertData(item[1])
      }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: { //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: true,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: function (params) {//圆环显示文字
              return params.data.name;
            },
            fontSize: 13
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: function (val) {
          return 5 + val[2] * 5; //圆环大小
        },
        itemStyle: {
          normal: {
            show: false,
            color: '#f00'
          }
        },
        data: item[1].map(function (dataItem) {
          return {
            name: dataItem[0].name,
            value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
          };
        }),
      },
        //被攻击点
        {
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              //offset:[5, 0],
              color: '#0f0',
              formatter: '{b}',
              textStyle: {
                color: "#0f0"
              }
            },
            emphasis: {
              show: true,
              color: "#f60"
            }
          },
          symbol: 'pin',
          symbolSize: 50,
          data: [{
            name: item[0],
            value: chinaGeoCoordMap[item[0]].concat([10]),
          }],
        }
      );
    });

    // 
    let option = {
      // 标题
      title: {
        // left: 'center',
        text: '来京路线 From',
        textStyle: {
          color: '#6d767e'
        }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(166, 200, 76, 0.82)',
        borderColor: '#FFFFCC',
        showDelay: 0,
        hideDelay: 0,
        enterable: true,
        transitionDuration: 0,
        extraCssText: 'z-index:100',
        formatter: function (params, ticket, callback) {
          //根据业务自己拓展要显示的内容
          var res = "";
          var name = params.name;
          var value = params.value[params.seriesIndex + 1];
          res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
          return res;
        }
      },
      backgroundColor: "#fff",
      visualMap: { // 图例值控制（官方叫做视觉映射组件）
        min: 0,
        max: 1,
        calculable: true,
        show: false,
        color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
        textStyle: {
          color: '#fff'
        }
      },
      geo: {
        map: 'china',
        zoom: 1.2,
        label: {
          emphasis: {
            show: false
          }
        },
        roam: true, //是否允许缩放
        itemStyle: {
          normal: {
            color: 'rgba(51, 69, 89, .5)', //地图背景色
            borderColor: '#516a89', //省市边界线00fcff 516a89
            borderWidth: 1
          },
          emphasis: {
            color: 'rgba(37, 43, 61, .5)' //悬浮背景
          }
        }
      },
      series: series
    };
    myChart.setOption(option)
  })()